<!--
 * @Author: your name
 * @Date: 2020-11-25 14:15:44
 * @LastEditTime: 2020-12-21 09:29:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-design\src\views\projectList\projectData.vue
-->
<template>
    <div class="project-data-main-box">
        <div class="left-sub-box">
            <el-form ref="form" :model="form" label-width="275px" label-position='left'>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{$t('project.data')}}</span>
                    </div>
                    <div class="content-mian-box">
                        <el-row :gutter="22">
                            <el-col :span="10" :offset="1">
                                <el-form-item :label="$t('project.data.project-name')" prop="proName" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                    <el-input v-model="form.proName" :placeholder="$t('common.info.pl-insert-content')" @blur="proNameBlur"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('project.data.project-number')" prop="proNumber" :rules="[{ required: false, message: $t('remind.not-null')}]">
                                    <el-input v-model="form.proNumber" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <el-form-item :label="$t('project.data.customer')" prop="clientName" :rules="[{ required: false, message: $t('remind.not-null')}]" label-width="100px">
                                    <el-input
                                    type="textarea"
                                    :rows="2"
                                    :autosize="{ minRows: 4, maxRows: 6}"
                                    :placeholder="$t('common.info.pl-insert-content')"
                                    v-model="form.clientName">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <div style="margin-top:20px;">
                    <el-row :gutter="24">
                        <el-col :span="12" :offset="0">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>{{$t('project.data.location')}}</span>
                                </div>
                                <div class="content-mian-box">
                                    <el-form-item :label="$t('project.data.region')" prop="regionId" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                        <el-select v-model="form.regionId" 
                                        filterable
                                        :placeholder="$t('common.msg.select.please')" @change="regionChange">
                                            <el-option
                                                    v-for="item in regions"
                                                    :key="item.regionID"
                                                    :label="item.regionNameInternational"
                                                    :value="item.regionID">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('project.data.country')" prop="countryId" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                        <el-select v-model="form.countryId" 
                                        filterable
                                        :placeholder="$t('common.msg.select.please')" @change="countryChange">
                                            <el-option
                                                    v-for="item in countrys"
                                                    :key="item.countryID"
                                                    :label="item.countryNameInternational"
                                                    :value="item.countryID">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('project.data.city')" prop="cityId" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                        <el-select v-model="form.cityId" 
                                        filterable
                                        :placeholder="$t('common.msg.select.please')" @change="cityChange">
                                            <el-option
                                            v-for="item in citys"
                                            :key="item.cityID"
                                            :label="item.cityNameInternational"
                                            :value="item.cityID">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-card>
                            <el-card class="box-card" style="margin-top:20px;">
                                <div slot="header" class="clearfix">
                                    <span>{{$t('project.data.temperatures')}}</span>
                                </div>
                                <div class="content-mian-box">
                                    <div style="margin-bottom:10px;">
                                        <el-radio v-model="form.tempMode" :label="0">{{$t('project.data.cell-temperatures')}}</el-radio>
                                        <el-radio v-model="form.tempMode" :label="1">{{$t('project.data.ambient-temperature')}}</el-radio>
                                    </div>
                                    <div v-show="form.tempMode == 0">
                                        <el-form-item :label="$t('project.Min.-temperature')" prop="cellAverageTemp"  label-width='280px'>
                                            <el-input v-model="form.cellLowTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('project.design-temperature')" prop="cellAverageTemp"  label-width='280px'>
                                            <el-input v-model="form.cellAverageTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('project.Max.-temperature')" prop="cellHighTemp"  label-width='280px'>
                                            <el-input v-model="form.cellHighTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div v-show="form.tempMode == 1">
                                        <el-form-item :label="$t('project.Min.-temperature')" prop="ambientLowTemp"  label-width='280px'>
                                            <el-input v-model="form.ambientLowTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('project.design-temperature')" prop="ambientAverageTemp"  label-width='280px'>
                                            <el-input v-model="form.ambientAverageTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('project.Max.-temperature')" prop="ambientHighTemp"  label-width='280px'>
                                            <el-input v-model="form.ambientHighTemp" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>{{$t('project.data.grid-connection')}}</span>
                                </div>
                                <div class="content-mian-box">
                                    <el-form-item :label="$t('project.data.grid-voltage')" prop="gridId" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                        <el-select v-model="form.gridId" :placeholder="$t('common.msg.select.please')" @change='chnageGrid'>
                                            <el-option :value="13" label="220V (220V / 380V)"></el-option>
                                            <el-option :value="5" label="230V (230V / 400V)"></el-option>
                                            <el-option :value="6" label="240V (240V / 415V)"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item   prop="checked" :rules="[{ required: false, message: $t('remind.not-null')}]" label-width='200px'>
                                        <template slot="label" >
                                            <el-checkbox v-model="form.demandsPowerFactor">{{$t('project.data.spe-displacement')}}</el-checkbox>
                                        </template>
                                        <div class="flex-box" style="margin-left:75px;">
                                            <el-select v-model="form.factorfPre"  style="width:80px;">
                                                <el-option :value="1" label="+"></el-option>
                                                <el-option :value="-1" label="-"></el-option>
                                            </el-select>
                                            <el-input style="width:80px;margin-left:15px;" type="number"
                                                      v-model="form.displacementPowerFactor" ></el-input>
                                        </div>
                                    </el-form-item>
                                    <p>{{$t('project.data.set-grid-voltage')}}</p>
                                </div>
                            </el-card>
                            <el-card class="box-card" style="margin-top:20px;">
                                <div slot="header" class="clearfix">
                                    <span>{{$t('project.data.comment')}}</span>
                                </div>
                                <div>
                                    <el-input
                                    type="textarea"
                                    :rows="2"
                                    :autosize="{ minRows: 4, maxRows: 6}"
                                    :placeholder="$t('common.info.pl-insert-content')"
                                    v-model="form.comment">
                                    </el-input>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <div class="right-sub-box">
            <rightReport :po-form-data="poFormData" :data-visible="dataVisible"></rightReport>
        </div>
    </div>
</template>

<script>
import rightReport from './rightReport'

export default {
    components: {
        rightReport
    },
    props: {

        azimuth:{
            type: Object,
            default () {
                return {}
            }
        },

        form:{
            type: Object,
            default () {
                return {}
            }
        },
        active:{
            type:Number,
            default:1,
        },
        poFormData:{
            type:Object,
            default:()=>{return {}}
        }
    },
    data() {
        return {
            dataVisible:{
                total: false,
                performance: false,
                overview: true
            },


            tempRadio: "1",
            powerFactorBoolean:false,
            factorfPre:1,
            regions:[],
            countrys:[],
            citys:[],
            regionId:'',
            countryID:'',
            firmName:[]
        };
    },
    computed: {

    },
    watch: {
        active:{
            handler(nv,ov){
                if(ov == 1 &&nv != 1){
                    this.tprojectUpdateProject()
                    
                }
            }
        }
    },
    created() {

    },
    mounted() {
        this.getAllRegion()
        this.getAllCountry()
        this.getAllcity()
    },
    methods: {
        async tprojectUpdateProject(){
            let res = await this.API.tprojectUpdateProject({
                ambientAverageTemp:this.form.ambientAverageTemp,
                ambientHighTemp:this.form.ambientHighTemp,
                ambientLowTemp:this.form.ambientHighTemp,
                cellAverageTemp:this.form.cellAverageTemp,
                cellHighTemp:this.form.cellHighTemp,
                cellLowTemp:this.form.cellLowTemp,
                cityId:this.form.cityId,
                clientName:this.form.clientName,
                comment:this.form.comment,
                countryId:this.form.countryId || '',
                demandsPowerFactor:this.form.demandsPowerFactor,
                displacementPowerFactor:this.form.displacementPowerFactor*this.form.demandsPowerFactor,
                gridId:this.form.gridId,
                // gridV:this.form.gridV,
                proName:this.form.proName,
                proNumber:this.form.proNumber,
                regionId:this.form.regionId,
                tempMode:this.form.tempMode,
                // factorfPre:this.form.factorfPre,
                projectId:this.$route.query.id,
            })
            this.$emit('noticeUpload',res)
        },
        /*区域改变*/
        regionChange(){
            this.$set(this.form , 'cityId' , '')
            this.form.countryId = ''
            this.getAllCountry(this.form.regionId)
            this.countrys = []
            this.citys = []
            // this.save()
            this.tprojectUpdateProject()
        },
        proNameBlur(){
            if(!this.form.proName){
                this.form.proName = this.$t('new.PV.management.new-project')
            }
        },
        /*国家改变*/
        countryChange(){
            this.$set(this.form , 'cityId' , '')
            this.$set(this.form , 'gridId' , '')
            this.getAllcity()
            // this.save()
        },
        cityChange(){
            this.azimuthChange();
            this.save()
        },

        /*建议角度改变*/
        azimuthChange(){
            let cityId = this.form.cityId
            let city = this.citys.find(item=>item.cityID == cityId)
            this.azimuth.azimuthProposal = city.azimuthProposal
            this.azimuth.inclinationProposal = city.inclinationProposal
            // 同时获取默认电压
            this.$set(this.form , 'gridId' , city.defaultGridID || 13)
        },


        chnageGrid(){
            this.save()
        },
        /*获取所有区域*/
        async getAllRegion(){
            let res = await this.API.systemRegionsGetAll({})
            this.regions = res;
        },

        /*获取所有国家*/
        async getAllCountry(){
            let res = await this.API.systemCountryGetAll({
                regionId: this.form.regionId
            })
            this.countrys = res
        },

        /*获取所有城市*/
        async getAllcity(){
            let res = await this.API.systemCityGetAll({
                countryID: this.form.countryID
            })
            this.citys = res
        },
        save(){
            // console.log('save');
            this.tprojectUpdateProject()
            this.$refs['form'].validate((valid) => {
              if (valid) {
                this.$emit('noticeUpload',true)
                this.$emit('closeAll',true)
              } else {
                this.$emit('closeAll',false)
                return false;
              }
            });
        }
    },
};
</script>

<style  lang="less" >
.project-data-main-box{
    display: flex;
    .el-card__header{
        background-color: #ddd;
    }
    .left-sub-box{
        flex: 9;
        padding: 10px;

    }
    .right-sub-box{
        flex: 3;
        padding: 10px;
    }
    .flex-box{
        display: flex;
    }
    .el-card .box-card .is-always-shadow{
        // transition: transform .3s ease,box-shadow .3s ease;
    }
    .el-card:hover {
        // transform: scale(1.02);
        // transform: translate3d(3px,3px,0px);
        // box-shadow: 0 1px 12px 0 rgba(3, 81, 155, 0.2);
    }
}
</style>

